@import './reset.scss';
@import './header.scss';
@import './footer.scss';
//页面头部


// 轮播图
.slideshow{
	width: 100%;
	height: 500px;
	background-color:#cccc;
}
 html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;	
    }
 
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	.btnprev{
		left:50px !important;
	}
	.btnnext{
		right:50px !important;
	}
	.btnnext ,.btnprev{
		color: #fefefe!important;
		width: 75px!important;
		height: 75px!important;
		background-color: rgba($color: #000000, $alpha: 0.1);
		font-size: 12px;
		
		&:hover{
			background-color: rgba(0,0,0,0.3);
		}
	}

// 主页
main{
	overflow: hidden;
	.shop{
		width:100%;
		height: 815px;
		background-color:#e8e8e8;
		position: relative;
			&-content{
				width: 1175px;
				height: 100%;
				// background-color: palevioletred;
				margin: 0 auto;
				overflow: hidden;
				
				dl{
					width: 445px;
					height: 640px;
					background-color: #e8e8e8;
					margin: 75px auto;
					dt{
						width: 100%;
						height: 450px;
						// background-color: orange;
						
					}
					dd{
						b{
							font-weight: normal;
							display: block;
							font-size: 12px;
							text-align: center;
							line-height: 12px;
						}
						p{
							font-size: 32px;
							text-align: center;
							line-height: 62px;
						}
						span{
							display:block;
							margin-left:20px;
							width: 145px;
							height: 40px;
							background: black;
							font-size: 12px;
							text-align: center;
							line-height: 40px;
							color: white;
							margin: 0 auto;
						}
					}
				}
				
			}
			&-card{
				position: absolute;
				width: 155px;
				height: 320px;
				background-color: #f2f2f2;
				right:300px;
				top:135px;
				padding: 0 10px;
				dl{
					dt{
						height: 145px;
						width: 135px;
						position: relative;
						
						.shop-card-small{
							position: absolute;
							width: 85px;
							height: 85px;
							border-radius: 50%;
							background-color: white;
							right: 0;
							top: 0;
							left: 0;
							bottom: 0;
							margin: auto;
							overflow: hidden;
							img{
								width: 100%;
								height: 100%;
								
							}
						}
					}
					dd{
						p{
							font-size: 20px;
							line-height: 20px;
							text-align: center;
							margin-bottom: 20px;
							color: #1b1b1b;
						}
						i{
							line-height: 20px;
							font-size: 12px;
							color: #c4c4c4;
							text-align: center;
						}
						a{
							margin-top: 20px;
							font-size: 12px;
							text-align: center;
							display: block;
						}
					}
				
				}
				
			}
	}
	
	
	
	// 双卡片
	.doublecard{
		width: 100%;
		height: 1105px;
		background-color: #e8e8e8;
		&-top{
			width: 100%;
			height: 840px;
			position: relative;
			img{
				width: 100%;
				height: 100%;
			}
			&-card1{
				position: absolute;
				width: 155px;
				height: 320px;
				background-color: #f2f2f2;
				right:250px;
				top:135px;
				padding: 0 10px;
				dl{
					dt{
						height: 145px;
						width: 135px;
						position: relative;
						.doublecard-top-card1-small{
							position: absolute;
							width: 85px;
							height: 85px;
							border-radius: 50%;
							overflow: hidden;
							background-color: white;
							right: 0;
							top: 0;
							left: 0;
							bottom: 0;
							margin: auto;
						}
					}
					dd{
						p{
							font-size: 20px;
							line-height: 20px;
							text-align: center;
							margin-bottom: 20px;
							color: #1b1b1b;
						}
						i{
							line-height: 20px;
							font-size: 12px;
							color: #c4c4c4;
							text-align: center;
						}
						a{
							margin-top: 20px;
							font-size: 12px;
							text-align: center;
							display: block;
						}
					}
				
				}
				
			}
			&-card2{
				position: absolute;
				width: 155px;
				height: 320px;
				background-color: #f2f2f2;
				left:300px;
				top:490px;
				padding: 0 10px;
				dl{
					dt{
						height: 145px;
						width: 135px;
						position: relative;
						.doublecard-top-card2-small{
							position: absolute;
							width: 85px;
							height: 85px;
							border-radius: 50%;
							overflow: hidden;
							background-color: white;
							right: 0;
							top: 0;
							left: 0;
							bottom: 0;
							margin: auto;
						}
					}
					dd{
						p{
							font-size: 20px;
							line-height: 20px;
							text-align: center;
							margin-bottom: 20px;
							color: #1b1b1b;
						}
						i{
							line-height: 20px;
							font-size: 12px;
							color: #c4c4c4;
							text-align: center;
						}
						a{
							margin-top: 20px;
							font-size: 12px;
							text-align: center;
							display: block;
						}
					}
				
				}
				
			}
		}
		&-bottom{
			width: 760px;
			height: 160px;
			margin: 50px auto;
			b{
							font-weight: normal;
							display: block;
							font-size: 12px;
							text-align: center;
							line-height: 12px;
						}
						p{
							font-size: 32px;
							text-align: center;
							line-height: 62px;
						}
						span{
							display:block;
							margin-left:20px;
							width: 145px;
							height: 40px;
							background: black;
							font-size: 12px;
							text-align: center;
							line-height: 40px;
							color: white;
							margin:20px auto 0;
							
						}
		}
	}
	
	.series{
		width: 100%;
		height: 470px;
		overflow: hidden;
		img{
			width: 100%;
			height:100% ;
		}
		&-content{
			
			width: 1175px;
			height: 100%;
			flex: 1;
			margin: 0 auto;
			margin-top: -470px;
			top: 0;
			position: relative;
			img{
				width: 100%;
				height: 100%;
			}
			&-card{
				width: 150px;
				height: 345px;
				position: absolute;
				background-color: #f2f2f2;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin:auto;
				padding: 10px 10px;
				p{
					font-size: 21px;
					line-height: 80px;
					text-align: center;
				}
				i{
					color: #666666;
					line-height: 30px;
					text-align: center;
					font-size: 12px;
				}
				a{
					line-height: 30px;
					text-align: center;
					font-size: 12px;
					display: block;
				}
			}
		}
		
	}
	.brandstory{
		width: 100%;
		height: 1060px;
		background-color: #e8e8e8;
		// margin: ;ent
		&-content{
			width: 1175px;
			height: 100%;
			margin: 0 auto;
			overflow: hidden;
			&-title{
				width: 200px;
				margin: 0 auto;
				p{
					
					font-size: 36px;
					line-height: 135px;
					text-align: center;
				}
				span{
					margin: 0 auto;
					width: 130px;
					display: block;
					border-bottom: 1px solid black;
				}
			}
			&-middle{
				width: 100%;
				height: 660px;
				margin-top: 80px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				overflow: hidden;
				&-left{
					width: 360px;
					height: 100%;
					dl{
						width: 100%;
						height: 300px;
						background-color: #e8e8e8;
						margin-bottom: 60px;
						box-shadow: 0px 5px 20px #ccc;
						&:hover{
							background-color: #CCCCCC;
							
						}
						dt{
							width: 300px;
							height: 200px;
							margin: 0 auto;
							img{
								width: 100%;
								height: 100%;
							}
							
						}
						dd{
							padding: 0 20px;
							a{
								color: #333333;
								font-style:normal;
								text-decoration: none;
								p{
									font-size: 14px;
									line-height: 37px;
									text-align: center;
									max-width: 500px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
							
							i{
								color: #878787;
								text-indent:2em ;
								font-size: 12px;
								line-height:20px;
								text-align: center;
								font-style: normal;
								max-width: 450px;
								 overflow : hidden;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-line-clamp: 2;
								 -webkit-box-orient: vertical;
							}
						}
						&:hover{
							
						}
					}
					
					
				}
				&-m{
					width: 360px;
					height: 100%;
					box-shadow: 0px 5px 20px #ccc;
					&:hover{
						background-color: #CCCCCC;
						
					}
					dl{
						width: 100%;
						height: 100%;
						margin-bottom: 30px;
						dt{
							width: 100%;
							height: 540px;
							margin: 0 auto;
							background-color: pink;
							img{
								width: 100%;
								height: 100%;
							}
							
						}
						dd{
							padding: 0 20px;
							p{
								font-size: 14px;
								line-height: 37px;
								text-align: center;
								max-width: 500px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							i{
								text-indent:2em ;
								font-size: 12px;
								line-height: 28px;
								text-align: center;
								font-style: normal;
								max-width: 450px;
								 overflow : hidden;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-line-clamp: 2;
								 -webkit-box-orient: vertical;
							}
						}
						&:hover{
							box-shadow: 0px 5px 20px #cccc;;
						}
					}
				}
				&-right{
					width: 360px;
					height: 100%;
					background-color: royalblue;
				}
			}
			&-click{
				width: 200px;
				height: 200px;
				margin: 75px auto;
				span{
					display: block;
					width: 145px;
					height: 35px;
					background-color: black;
					color: white;
					line-height: 35px;
					text-align: center;
					font-size: 12px;
				}
			}
		}
		
	}
	
}


// 底部
